<template>
  <div class="login">
    <header>
      <h1>欢迎使用Sosi接口测试平台</h1>
    </header>
    <div class="container"> 
      <div class="form-wrapper">
        <input class="input-item" type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
        <br><br>
        <input class="input-item" type="password" v-model="loginForm.password" placeholder="请输入密码"/>
        <br><br>
        <!-- <a href="/login">登录</a> -->
        <button class="btn" v-on:click="login">登录</button>
        <br><br>
        <div class="additional-links">
          <a href="/register">注册</a>
          <span> | </span>
          <a href="/forgot-password">忘记密码</a>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>

  export default {
    name: 'sosiLogin',
    data () {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        responseResult: []
      }
    },
    methods: {
      login () {
        this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              this.$router.replace({path: '/index'})
            }
          })
          // eslint-disable-next-line
          .catch(failResponse => {
          })
      }
    }
  }
</script>

<style>

  .login{
      margin: 20;
      padding: 0;
       /* 添加其他样式来美化页面 */
      background-image: url('C:\E\inventory\Picture\interface\002.jfif');
  }
  header {
    text-align: center;
    padding: 5px;
  }
  .container {
      height: 300px;
      widows: 100%;
      margin-top: 50px;
  }
  .form-wrapper{
    width:350px;
    height:70%;
    margin: auto;
    padding: 30px;
    border-style:solid;
    border-width:2px;
    border-color:#07dde8;
    border-radius: 25px;
    background-color: #ffffff;
    opacity:0.8;
  }
  .input-item {
      display: block;
      width: 100%;
      margin-bottom: 5px;
      border: 0;
      /*用户名及密码下划线的颜色*/
      border-bottom: 1px solid rgb(21, 173, 224);
      font-size: 20px;
      outline: none;
  }
  .input-item:placeholder {
      text-transform: uppercase;
  }
  .btn {
      text-align: center;
      font-size: 16px;
      padding: 10px;
      width: 100%;
      margin-top: 5px;
      /*登录按钮颜色*/
      background-image: linear-gradient(to right, #17eded, #0ab3d5);
      color: #fff;
      border-radius: 15px;
  }
  .additional-links{
    text-align: right;
  }
</style>
